<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻中心-管理员</title>
<link rel="stylesheet" href="${BasePath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${BasePath}/css/bootstrap-pager.css">
<link rel="stylesheet" href="${BasePath}/css/common.css?v=${cssVersion}">
<!-- <link type="text/css" href="${BasePath}/admin/css/theme.css" rel="stylesheet"> -->
<style>
.table{
    table-layout: fixed;
}
/*table的内容样式*/
.table-content{
  word-wrap:break-word;
  table-layout:fixed;

}
.table-content-hidden{
  word-wrap:break-word;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}
#pageLimit li a{
	cursor: pointer;
}


.navbar .nav>li>a {
    padding: 20px 15px;
    font-weight: bold;
}
.navbar .pull-right>li>.dropdown-menu, .navbar .nav>li>.dropdown-menu.pull-right {
    right: 0;
    left: auto;
}
.nav-avatar {
    width: 34px;
    height: 34px;
    margin: -7px 5px 0 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.navbar .nav>li>.dropdown-menu {
    border: 1px solid #ccc;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    margin: -1px 0 0;
    z-index: 9991;
}
.navbar .nav>li.dropdown.open>.dropdown-toggle, .navbar .nav>li.dropdown.active>.dropdown-toggle, .navbar .nav>li.dropdown.open.active>.dropdown-toggle {
    background: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding-left: 14px;
    padding-right: 14px;
    position: relative;
    z-index: 9999;
}
</style>
</head>
<body>
	<#include '/admin/navAdmin.html'>
	<div class="panel panel-default">
		<div class="panel-heading">
	        <div class="panel-title">
		        <div class="row" >
		        	<div class="col-lg-8">
			        	<strong>新闻中心（管理员端）</strong>
			        </div>
		        	<div class="col-lg-2">
			        	<button class="btn btn-primary" id="btnAddNews" style="float:right;">添加新闻</button>
			        </div>
		            <div class="col-lg-2">
		                <div class="input-group">
		                    <input type="text" class="form-control keyWord" value="${keyWord}">
		                    <span class="input-group-btn">
		                        <button class="btn btn-default search">搜索</button>
		                    </span>
		                </div>
		            </div>
		        </div>
	        </div>
	    </div>
	    <div class="panel-body">
		    <div id="container">
			    <table class="table table-bordered table-hover table-condensed">
					<thead>
						<tr>
							<th style="width: 280px;">新闻标题</th>
							<th style="width: 100px;">新闻内容</th>
							<th style="width: 100px;">是否推荐</th>
							<th style="width: 100px;">状态</th>
							<th style="width: 160px;">创建时间</th>
							<th style="width: 160px;">更新时间</th>
							<th style="width: 200px;">操作</th>
						</tr>
					</thead>
					<tbody>
						<#list pageInfo.list as news>
						<tr>
							<td>${(news.title)!'无'}</td>
							<td>
								<!-- <button type="button" class="btn btn-success" title="新闻内容"
								data-container="body" data-html="true" data-toggle="popover" data-placement="bottom" 
								data-content="${(news.content)!'无'}">查看</button> -->
								
								<button class="btn btn-success" data-toggle="modal" data-target="#${(news.id)}">
									查看
								</button>
								<!-- 模态框（Modal） -->
								<div class="modal fade" id="${(news.id)}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel${(news.id)}" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
													&times;
												</button>
												<h4 class="modal-title" id="myModalLabel${(news.id)}">
													${(news.title)}
												</h4>
											</div>
											<div class="modal-body">
												${(news.content)}
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default" data-dismiss="modal">关闭
												</button>
											</div>
										</div><!-- /.modal-content -->
									</div><!-- /.modal -->
								</div>
								
							</td>
							<td id="recommend_${news.id}">${(news.isRecommend == 1)?string('是', '否')}</td>
							<td>${(news.status == 0)?string('有效', '无效')}</td>
							<td>${news.createTime?string('yyyy-MM-dd hh:mm:ss')!''}</td>
							<td>${news.updateTime?string('yyyy-MM-dd hh:mm:ss')!''}</td>
							<td id="ops_${news.id}">
								<div class="btn-group" role="group" aria-label="Basic example">
								<#if news.isRecommend == 1>
									<button type="button" nid="${news.id}" class="btn btn-success recommend hide">设置推荐</button>
									<button type="button" nid="${news.id}" class="btn btn-success cancelRecommend show">取消推荐</button>
								<#else>
									<button type="button" nid="${news.id}" class="btn btn-success recommend show">设置推荐</button>
									<button type="button" nid="${news.id}" class="btn btn-success cancelRecommend hide">取消推荐</button>
								</#if>
								<button type="button" nid="${news.id}" class="btn btn-success deleteNews">删除</button>
								<button type="button" nid="${news.id}" class="btn btn-success editNews">编辑</button>
								</div>
							</td>
						</tr>
						</#list>
					</tbody>
				</table>
			</div>
			<div id="page-container-static-big" style="text-align: center;">
				<ul id="pageLimit"></ul>
			</div>
	    </div>
	</div>
	
	<script type="text/javascript" src="${BasePath}/js/jquery-3.3.1.min.js"></script>  
	<script type="text/javascript" src="${BasePath}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/bootstrap-pager.js"></script>
	<script type="text/javascript" src="${BasePath}/js/common-func.js?v=${jsVersion}"></script>
	<script>
	var curContentEditBtn = null;
	
	//禁用返回
//     window.history.pushState(null, null, "#");
// 	window.addEventListener("popstate", function(e) {
// 		window.history.pushState(null, null, "#");
// 	});
	if(${pageInfo.pages} > 0){
		var pageSize = ${pageInfo.pageSize};
		var totalPages = ${pageInfo.pages};
		var currentPage = ${pageInfo.pageNum};
		var keyWord = '${keyWord}';
		$('#pageLimit').bootstrapPaginator({
			currentPage: currentPage,
			totalPages: totalPages,
			size:"big",
			bootstrapMajorVersion: 3,
			alignment:"right",
			numberOfPages: pageSize,
			itemTexts: function (type, page, current) {
				switch (type) {
				case "first": return "首页";
				case "prev": return "上一页";
				case "next": return "下一页";
				case "last": return "末页";
				case "page": return page;
				}//默认显示的是第一页。
			},
			//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
			onPageClicked: function (event, originalEvent, type, page){
				if(currentPage == page) return;
				currentPage = page;

				var newsList = getNewsList(keyWord, currentPage, pageSize);
	// 			console.log('newsList: ' + JSON.stringify(newsList))
				var doms = getNewsListDom(newsList);
				console.log('doms: ' + doms)

				$('tbody').html(doms);

				regAuditEvents();
			}
		});
    }
	$(document).ready(function(){
		
	    $("#btnAddNews").click(function(){
			window.location.href = "${BasePath}/page/admin/news/add"
		});
	    $(".search").click(function(){
	    	keyWord = $(".keyWord").val();
	    	var target = "${BasePath}/page/admin/news?1=1";
	    	if(!!keyWord) target += "&keyWord=" + keyWord;
	    	if(!!currentPage) target += "&pageNum=" + currentPage;
	    	if(!!pageSize) target += "&pageSize=" + pageSize;
	    	
	    	window.location.href = target;
	    });
	    regAuditEvents();
	});
	
	function regAuditEvents(){
		$("[data-toggle='popover']").popover();
		
		//取消新闻推荐事件
		$(".cancelRecommend").click(function(){
			var nid = $(this).attr("nid");
			
			var ret = recommendNews(nid, false);
			if(ret){
			    var dom = $("#recommend_"+nid);
				dom.html("否");
				alert('操作成功！');
				
				var rDom = $("#ops_"+nid + ' .recommend');
				rDom.removeClass('hide');
				rDom.addClass('show');
				
				var crDom = $("#ops_"+nid + ' .cancelRecommend');
				crDom.removeClass('show');
				crDom.addClass('hide');
			}
			else{
				alert('操作失败！')
			}
		});
		
		//新闻推荐事件
		$(".recommend").click(function(){
			var nid = $(this).attr("nid");
			
			var ret = recommendNews(nid, true);
			if(ret){
			    var dom = $("#recommend_"+nid);
				dom.html("是");
				alert('操作成功！');
				
				var rDom = $("#ops_"+nid + ' .recommend');
				rDom.removeClass('show');
				rDom.addClass('hide');
				
				var crDom = $("#ops_"+nid + ' .cancelRecommend');
				
				crDom.removeClass('hide');
				crDom.addClass('show');
			}
			else{
				alert('操作失败！')
			}
		});
		
		//删除
		$(".deleteNews").click(function(){
			var nid = $(this).attr("nid");
			
			var ret = deleteNews(nid);
			if(ret){
				alert('删除成功！');
				location.reload();
			}
			else{
				alert('删除失败！')
			}
		});
		
		//编辑
		$(".editNews").click(function(){
			var nid = $(this).attr("nid");
			window.location.href = "${BasePath}/page/admin/news/edit?newsId="+nid;
			
		});
		
	}
	
	//推荐或取消推荐新闻
	function recommendNews(nid, recommend){
		var params = {
			id: nid,
		};
		var req = {requestData: JSON.stringify(params)};
		var ret = false;
		var url = recommend ? '${BasePath}/api/news/setRecommend'
				:'${BasePath}/api/news/cancelRecommend';
		$.ajax({
			url: url,
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data == null) return;
				if(data.code == 200) ret = Boolean(data.responseData);
			}
		});
		return ret;
	}
	
	//删除新闻
	function deleteNews(ids){
		var params = {
			ids: ids,
		};
		var req = {requestData: JSON.stringify(params)};
		var ret = false;
		var url = '${BasePath}/api/news/delete';
		$.ajax({
			url: url,
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data == null) return;
				if(data.code == 200) ret = Boolean(data.responseData);
			}
		});
		return ret;
	}
	
	//获取新闻列表
	function getNewsList(keyWord, pageNum, pageSize){
		var params = {
				keyWord: keyWord,
				pageNum: pageNum,
				pageSize: pageSize,
		};
		console.log(JSON.stringify(params))
		var req = {requestData: JSON.stringify(params)};
		var ret = {};
		var url = '${BasePath}/api/news/search';
		$.ajax({
			url: url,
			type:'POST',
			data: params,
			dataType:'json',
			async: false,
			cache:false, 
			success:function (data) {
// 				console.log("data=" + JSON.stringify(data));
				if(data == null) return;
				if(data.statusCode == 200) ret = data.result.list;
			}
		});
		return ret;
	}
	
	
	function getNewsDom(news){
		if(!news) return '';
		var dom = '\r\n<tr>';
		
		if(!news.title) news.title = '无'
		dom += '\r\n<td>' + news.title + '</td>';
		
		if(!news.content) news.content = '无';
		dom += '\r\n<td>';
		/* dom += '\r\n<button type=\"button\" class=\"btn btn-success\" title=\"新闻内容\" data-container=\"body\" data-toggle=\"popover\" '
		+'data-placement=\"bottom\" data-content=\"'+ news.content + '\">查看</button>'; */
		
		dom += '\r\n<button class="btn btn-success" data-toggle="modal" data-target="#'+news.id+'">查看</button>'+
	<!-- 模态框（Modal） -->
	'<div class="modal fade" id="'+news.id+'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel'+news.id+'" aria-hidden="true">'+
		'<div class="modal-dialog">'+
			'<div class="modal-content">'+
				'<div class="modal-header">'+
					'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'+
					'<h4 class="modal-title" id="myModalLabel'+news.id+'">'+news.title+'</h4>'+
				'</div>'+
				'<div class="modal-body">'+news.content+'</div>'+
				'<div class="modal-footer">'+
					'<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>'+
				'</div>'+
			'</div>'+<!-- /.modal-content -->
		'</div>'+<!-- /.modal -->
	'</div>';
		
		dom += '\r\n</td>';
		
		var isRecommend = (news.isRecommend == 1)?'是':'否';
		dom += '\r\n<td id=\"recommend_' + news.id + '\">' + isRecommend + '</td>';
		
		var status = (news.status == 0)?'有效':'无效';
		dom += '\r\n<td>' + status + '</td>';
	
		var time = time2DateTimeStr(news.createTime);
		dom += '\r\n<td>' + time + '</td>';
		
		time = time2DateTimeStr(news.updateTime);
		dom += '\r\n<td>' + time + '</td>';

		
		var cls1 = (news.isRecommend == 1)? 'btn btn-success recommend hide':'btn btn-success recommend show';
		var cls2 = (news.isRecommend == 1)? 'btn btn-success cancelRecommend show':'btn btn-success cancelRecommend hide';
		var cls3 = 'btn btn-success deleteNews';
		var cls4 = 'btn btn-success editNews';
		
		dom += '\r\n<td id=ops_' + news.id + '>';
		dom += '\r\n<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">';
		dom += '\r\n<button type=\"button\" nid=\"' + news.id + '\" class=\"' + cls1 + '\">设置推荐</button>';
		dom += '\r\n<button type=\"button\" nid=\"' + news.id + '\" class=\"' + cls2 + '\">取消推荐</button>';
		dom += '\r\n<button type=\"button\" nid=\"' + news.id + '\" class=\"' + cls3 + '\">删除</button>';
		dom += '\r\n<button type=\"button\" nid=\"' + news.id + '\" class=\"' + cls4 + '\">修改</button>';
		dom += '\r\n</td>';
		dom += '\r\n</div>';
		dom += '\r\n</tr>';
		return dom;
	}
	
	function getNewsListDom(newsList){
		if(!!newsList && newsList.length > 0){
			var doms = '';
			for(var i = 0; i < newsList.length; ++i){
				doms += getNewsDom(newsList[i])
			}
			return doms;
		}
		return ''
	}
	</script>
</body>
</html>